$scrollbar-width: 10px;
$scrollbar-padding: 3px;
$scrollbar-color: #c3c2c2;
*::-webkit-scrollbar {
  background-color: transparent;
  width: $scrollbar-width;
  height: $scrollbar-width;
}
*::-webkit-scrollbar-thumb {
  background-color: transparent;
  box-shadow: inset 0 0 $scrollbar-width $scrollbar-width $scrollbar-color;
  border: solid $scrollbar-padding transparent;
}

/* span 不设置 */
body,h1,h2,h3,
div,p,a,ul,li,
input[type="text"], textarea,
header, main  {
  width: 100%;
  margin: 0;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 0;
  margin-left: 0;
  padding: 0;
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
  padding-left: 0;

  box-sizing: border-box;
}

h1,h2,h3,h4,p,a {
  width: max-content;
}

input[type="text"], textarea {
  height: 100%;
  resize: none;

  border: none;
  outline: none;
  font-size: inherit;

  &::placeholder {
    opacity: .6;
  }
}

li {
  list-style: none;
}

// p 一般用作单行文本或多行文本
p {
  padding: 4px 8px;
}

// a 一般是 router-link
a {
  color: inherit;
  text-decoration: none;
}

// svg 一律放在 span 中, 并且令该 span 可控制 svg 的宽高, 此处给出默认大小
span.svg {
  display: inline-block;
  width: 20px;
  height: 20px;
  // fill: inherit;
  svg {
    width: 100%;
    height: 100%;
    fill: inherit;
  }
}

span.img {
  width: 220px;
  height: 122px;
  display: inline-block;
  img {
    width: 100%;
    height: 100%;
  }
}